<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="format-detection" content="telephone=no" />
	<title>约哪儿</title>
	<link rel="stylesheet" type="text/css" href="css/style.css"></head>
<body>
	<div class="title">拒绝饭托、酒托，领爱官方亲自踩点的约会场所，为您的约会护航！</div>

        <div class="banner" id="img_main">
            <div  class="bannerbox" id="img_list"  >
                <a href="http://www.baidu.com" ><img src="images/baner.jpg"  /></a><a href=""><img src="images/baner.jpg"  /></a><a href=""><img src="images/baner.jpg"  /></a><a href=""><img src="images/baner.jpg"  /></a>
            </div>
          <!-- <p class="page"><span class="page_num" id="page_num">1</span>/<span>4</span></p> -->
        </div>

	 <div class="imgnum" id="page_num">	</div>
	<ul class="classlist">
		<li>
			<a href="">
				<span>[星巴克]卡布其诺 ￥36</span>
				<img src="images/li.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="">
				<span>[星巴克]卡布其诺 ￥36</span>
				<img src="images/li.jpg" alt="">
				
			</a>
		</li>
	</ul>

<script type="text/javascript">
    var img_main = document.getElementById("img_main");
    var img_list = document.getElementById("img_list");
    var num = document.getElementById("page_num");
    var list = img_main.children[0].getElementsByTagName('img');
    var lg = list.length;

    // img_list.className='normal';
    var  nowX = 0,
         moveX = 0,
         startX = 0,
         startY = 0;
    function createI(bollean){
        var tagi = document.createElement('i');
        if(bollean){
            tagi.className='current';
            num.appendChild(tagi);
        }else{
            num.appendChild(tagi);
        }
    }
    for(var i = 0 ; i < lg ; i++){
        if(i==0){
            createI(true)
        }else{
            createI(false)
        }
        list[i].setAttribute('n',i+1);
       
    }; 
    // img_list.className='bannerbox move';
    function index( move , obj) {   //返回索引函数
        var items = obj.children;

        var one = list[0].width;
        o = move-one/2;
        for (var i = 0;i < lg ; i++) {
            if( (o <= -one*i) && o > (-one*(i+1))) {
                return i+1;
            }
        }
    }
    var elems = img_list.getElementsByTagName("img");//获取图片对象
    var boxW;
    var touchNum ;
    var turn;
    //touchStart函数：用于记录鼠标开始点

    function touchStart(e) {
        e.preventDefault();
        turn = true;
        var touches = e.changedTouches;
        startX = e.touches[0].pageX;
        boxW = elems[0].width;
        touchNum = this.getAttribute('n')
    }

    var s = undefined;  //用于判断moveX是否是第一次被赋值
    var window_WIDTH = window.screen.width;
    var ALLimg_width = elems[0].width * (lg-1) ;
    function touchMove(e) {  //移动函数
        turn =false;
        e.preventDefault();//阻止默认事件
        var touches = e.changedtTouches;
        moveX = e.touches[0].pageX - startX;
        nowX += moveX;   //累加移动的部分
        if(nowX >= 0) {   //第一张向左移还是第一张
            nowX = 0;
            img_list.style.webkitTransform = 'translate(' + nowX + 'px)';
        }
        else if( nowX <= -ALLimg_width) { //最后一张向左移还是最后一张
            nowX = -ALLimg_width;
            img_list.style.webkitTransform = 'translate(' + nowX + 'px)';
        }else{
            var li_index = index(nowX,this);   //求出点击图片在列表中的索引值
            for(var i in  num.getElementsByTagName('i')){
                num.getElementsByTagName('i')[i].className='';
            }
            num.getElementsByTagName('i')[li_index-1].className = 'current';
            img_list.style.webkitTransform = 'translate(' + nowX + 'px)';
            s = moveX;
            startX = e.touches[0].pageX;   //移动每次要重新获取
        }
      

    }
    function touchEnd(e) {  //移动结束函数
        if(turn){
            var turnurl = this.parentNode.getAttribute('href');
            window.open(turnurl);
        }
        e.preventDefault();
        e.changedtTouches = null;
        var endNum ;
        if(moveX>1){
            endNum = parseInt(touchNum) - 1;
        }else if(moveX<-1){
            endNum = parseInt(touchNum) + 1;
        }else{
            endNum = parseInt(touchNum);
        }
        nowX += moveX;   //累加移动的部分
         if(nowX >= 0) {   //第一张向左移还是第一张
            nowX = 0;
            img_list.style.webkitTransform = 'translate(' + nowX + 'px)';
        }
        else if( nowX <= -ALLimg_width) { //最后一张向左移还是最后一张
            nowX = -ALLimg_width;
            img_list.style.webkitTransform = 'translate(' + nowX + 'px)';
        }else{
            nowX = - boxW*(endNum-1);
            img_list.style.webkitTransform = 'translate(' + nowX + 'px)';
        }
        var li_index = index(nowX,this);   //求出点击图片在列表中的索引值
        for(var i in  num.getElementsByTagName('i')){
            num.getElementsByTagName('i')[i].className='';
        }
        num.getElementsByTagName('i')[li_index-1].className = 'current';
        moveX = 0;
    }
       
      
    for(var i = 0 ; i < elems.length ; i++){
        elems[i].addEventListener('touchstart', touchStart, false);
        elems[i].addEventListener('touchmove', touchMove, false);
        elems[i].addEventListener('touchend', touchEnd, false);
    }
</script>
</body>
</html>